<template>
  <van-row>
    <scroller :on-refresh="onRefresh" :on-infinite="onLoad" ref="scrollList" class="scroller_List"
      :style="scrollListStyle">
      <!-- 滑动单元格 -->
      <van-swipe-cell v-for="item in data" :key="item.id" style=" width:80%">
        <!-- 单元格 -->
        <van-cell style="margin-top:10px" :key="item.id" is-link :to="{name:'detail',params:{id:item.id}}" size="large">
          <template #title>
            <span style="font-size:18px" class="custom-title">{{item.title}}</span>
            <van-tag type="danger" v-if="item.status==0">待处理</van-tag>
            <van-tag type="success" v-else-if="item.status==1">已处理</van-tag>
            <van-tag type="primary" v-else-if="item.status==2">取消</van-tag>
            <van-tag type="warning" v-else-if="item.status==3">忽略</van-tag>
          </template>
          <template>
            {{ $moment(item.endDate).format("YYYY-MM-DD")}}
          </template>
          <template #label>
            {{item.createUser}}
          </template>
        </van-cell>
        <!-- 往左滑动显示的内容 -->
        <template #right>
          <van-button square text="编辑" type="primary" @click="$router.push(`/edit/${item.id}`)" class="btn_swipeDel" />
          <van-button square text="删除" type="danger" @click="onHandlerDel(item.id)" class="btn_swipeDel" />
        </template>
      </van-swipe-cell>
    </scroller>
  </van-row>
</template>

<script>
  import moment from 'moment';
  import {
    Cell,
    Toast,
    Tag,
    Row,
    Col,
    SwipeCell,
    Button,
    Dialog,
    Sidebar,
    SidebarItem
  } from 'vant'
  export default {
    describute: "任务列表",
    name: "tasklist",
    props: {
      type: {
        type: String,
        default: '0'
      },
      changeTab: {
        type: String
      }
    },
    components: {
      'van-cell': Cell,
      'van-tag': Tag,
      'van-col': Col,
      'van-row': Row,
      'van-swipe-cell': SwipeCell,
      'van-button': Button,
      'van-sidebar': Sidebar,
      'van-sidebar-item': SidebarItem
    },
    data: function () {
      return {
        data: [], //任务的集合
        refreshing: false, //下拉刷新的状态
        listErrorMsg: "加载错误",
        loading: false, //列表数据加载的状态
        finished: false, //数据是否全部加载完成
        pageIndex: 0, //当前页数
        pageSize: 10, //显示的条数
        active: 0,
        scrollListStyle: ''
      }
    },
    methods: {
      //下拉刷新 数据重新加载
      async onRefresh(done) {
        //初始化页数
        this.pageIndex = 1;
        //加载数据
        var res = await this.loadData();
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        this.data = res.data;
        //停止加载
        done();
      },
      //加载数据的接口
      async onLoad(done) {
        //页数加一
        this.pageIndex++;
        var res = await this.loadData();

        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }

        //合并数据
        this.data = [...this.data, ...res.data]
        //验证数据是否加载完成
        if (res.data == null || res.data.length < this.pageSize) {
          done(true);
        } else {
          done();
        }
      },
      //加载数据
      async loadData() {
        return await this.$ajax.get(
          `/api/task/list/${this.$store.state.taskListActive-1}?keyword=${this.$store.state.taskSearch}&organizationId=${ this.$user.getOrganizationId()}&userName=${ this.$user.getUserName()}&type=${this.type}&pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`
        );
      },
      //处理任务的删除
      async onHandlerDel(id) {
        try {
          //获取操作名称
          var action = await Dialog.confirm({
            title: '提示',
            message: '是否删除',
          });
          if (action === 'confirm') {
            var data = {
              operationUser: this.$user.getUserName(),
            };
            var res = await this.$ajax.delete(`/api/task/${id}`, data);
            //验证状态
            if (res.status == 1) {
              Toast.fail(res.msg);
            } else {
              Toast.success('操作成功');
              //直接删除data的元素
              this.data.splice(this.data.findIndex(item => item.id == id), 1);
            }
          }
        } catch (error) {
          return;
        }
      },
      //初始化数据
      async onInitData() {
        //初始化页数
        this.pageIndex = 1;
        //加载数据
        var res = await this.loadData();
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        this.data = res.data;
      },
    },
    async beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
      // await this.onInitData();
    },
    mounted() {
      //滚动区域的样式 检查 从其它地方 过来 给个30的高
      this.scrollListStyle = this.changeTab ? 'margin-top:30px' : '';
      //更改页面底部的状态
      this.$store.commit('updatetTabberActive', this.changeTab ? this.changeTab : 'tasklist')
    }
  }

</script>

<style scoped>
  .scroller_List {
    top: 100px ! important;
    left: 21% ! important;
  }

  .btn_swipeDel {
    height: 100%;
  }

</style>
<style>
  ._v-container>._v-content>.loading-layer>.no-data-text.active[data-v-ecaca2b0],
  ._v-container>._v-content>.loading-layer>.spinner-holder.active[data-v-ecaca2b0] {
    margin-left: -40px;
  }

  ._v-container>._v-content>.pull-to-refresh-layer[data-v-ecaca2b0] {
    margin-left: -50px;
  }

</style>
